<template>
  <view class="dialog-mask-comp" @click="$emit('click')"
  :style="{
    backgroundImage: `url(${staticImgs.dialogBg})`
  }"
  >
    <view class="dialog-wrapper">
      <view class="dialog-bg" >
        <view class="dialog-text">
          <slot name="content"></slot>
        </view>
      </view>
      <view class="btn-group">
        <image class="btn-img" :src="btnImg || staticImgs.confirmBtn" mode="widthFix"></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default{
    props:{
     // btnOpts:{
     //   type: Object,
     //   default:()=>({})
     // },
     btnImg:{
       type:String,
       default:''
     }
    },
    computed: {
    },
    data(){
      return {
        staticImgs:{
          dialogBg: this.imgBaseURL + "/scl/checkup-sexuality/guide-bg.png",
          confirmBtn:  this.imgBaseURL + "/scl/checkup-sexuality/confirm-btn.png",
        },
        btnType:1
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dialog-mask-comp{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 750rpx;
    z-index: 2;
    // height: 1279rpx;
    height: 1600rpx;
    min-height: 100vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // background: linear-gradient( 180deg, rgba(127,128,127,0) 0%, rgba(44,97,125,1) 100%);
    
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    
    .dialog-wrapper{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding-bottom: 126rpx;
    }
    
    
    .dialog-bg{
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 668rpx;
      height: 440rpx;
      display: flex;
      align-items: flex-end;
      box-sizing: border-box;
      padding-bottom: 4rpx;
      justify-content: center;
      
      .dialog-text{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 45rpx;
        text-align: justify;
        font-style: normal;
        
        width: 610rpx;
        height: 180rpx;
        // margin: auto;
      }
      
    }
    
    .btn-group{
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 54rpx;
      margin-top: 50rpx;
      
      .btn-img{
        width: 380rpx;
        height: 120rpx;
      }
    }
  }
</style>